<template>
	<view class="container">
		<view class="title">
			学生身份证信息
		</view>
		<view class="form">
			<view class="item">
				<text>姓名：</text>
				<input type="text" value="" v-model="name" placeholder="请输入您的姓名" placeholder-class="cl" />
			</view>
			<view class="item">
				<text>性别：</text>
				<xhy-radio-group @change="setRadioSelect">
					<xhy-radio :checked="gender===1" label="男" value="1" color="#4ED383"></xhy-radio>
					<xhy-radio :checked="gender===0" label="女" value="0" color="#4ED383"></xhy-radio>
				</xhy-radio-group>
			</view>
			<view class="item">
				<text>生日：</text>
				<view class="birthday" @click="showDate">
					{{birthday}}
				</view>
				<!-- <input type="text" value="" v-model="birthday" placeholder="请输入生日" placeholder-class="cl" /> -->
			</view>
			<view class="item">
				<text>身份证号码：</text>
				<input type="idcard" value="" v-model="cardNum" placeholder="请输入您的身份证号码" placeholder-class="cl" />
			</view>

			<view class="localItem">
				<text>现住址：</text>
				<textarea v-model="local" placeholder="请输入详细地址" placeholder-class="cl" />
			</view>
		</view>
		<view class="secTitle">
			上传身份证
		</view>
		<view class="cardContainer">
			<view class="cardItem">
				<image :src="cardA?cardA:card1" mode="" @click="uploadCard(1)"></image>
			</view>
			<view class="cardItem">
				<image :src="cardB?cardB:card2" mode="" @click="uploadCard(2)"></image>
			</view>
		</view>
		<view class="save" @click="save">
			保存
		</view>
		<w-picker :visible.sync="visible" mode="date" startYear="1990" endYear="2029" :value="birthday" :current="true"
			fields="day" @confirm="onConfirm($event,'date')" @cancel="onCancel" :disabled-after="true" ref="date">
		</w-picker>
	</view>
</template>

<script>
	import XhyRadioGroup from '@/components/xhy-radio/xhy-radio-group';
	import XhyRadio from '@/components/xhy-radio/xhy-radio';
	export default {
		data() {
			return {
				visible:false,
				name: "",
				cardNum: "",
				birthday: "请选择",
				local: "",
				gender: 0,
				cardA: '',
				cardB: '',
				card1:require('../../../static/img/carda.png'),
				card2: require('../../../static/img/cardb.png'),
			}
		},
		components: {
			XhyRadioGroup,
			XhyRadio
		},
		created() {
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/auth'
					});
				}
			});
		},
		methods: {
			onConfirm(e){
				console.log(e);
				this.birthday = e.value;
			},
			onCancel(){
				this.visible = false;
			},
			showDate(){
				this.visible = true;
			},
			setRadioSelect(e) {
				console.log(e)
				this.gender = e;
			},
			uploadCard(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths //图片临时数组
						uni.uploadFile({
							//请求的url接口地址
							url: 'https://mx.acktechnologies.com.cn/api/wxapp/common/uploadImage',
							formData: {
								//请求中接口额外的参数
								'token': this.token
							},
							fileType: 'file', //图片类型
							filePath: tempFilePaths[0], //哪张图片
							name: 'file', //对应接口的文件名称
							header: { //请求头
								"Content-Type": "multipart/form-data"
							},
							success: (res) => {
								//成功的回调
								//一般用于重新获取数据渲染页面
								console.log(res)
								let info = JSON.parse(res.data)
								console.log(info)
								if (info.code === 1) {
									if (type === 1) {
										this.cardA = info.data.url;
									} else {
										this.cardB = info.data.url;
									}

								}
							},
							fail: (err) => {
								//失败的回调
								console.log(err)
							}
						})
					}
				})
			},
			save() {
				if (this.name === '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return false;
				}
				if (this.cardA === '') {
					uni.showToast({
						title: '请上传证件正面',
						icon: 'none'
					});
					return false;
				}
				if (this.cardB === '') {
					uni.showToast({
						title: '请上传证件反面',
						icon: 'none'
					});
					return false;
				}
				if (this.birthday === '请选择') {
					uni.showToast({
						title: '请输入生日',
						icon: 'none'
					});
					return false;
				}
				let param = {
					"token": this.token,
					"nickname": this.name,
					"id_card_a": this.cardA,
					"id_card_b": this.cardB,
					"gender": this.gender,
					"birthday": this.birthday,
					"address": this.local
				}
				param.id_number = this.cardNum;
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/info/infoSave`,
					data: param,
					method: 'GET',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							uni.showToast({
								title: '保存成功！',
								icon: 'none'
							})
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
			getData() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/info/infoLoading`,
					data: {
						"token": this.token
					},
					method: 'GET',
					success: res => {
						uni.hideLoading();
						console.log(res)
						if (res.data.code === 1) {
							let info = res.data.data;
							this.name = info.nickname;
							this.cardNum = info.id_number;
							if(info.birthday){
								this.birthday = info.birthday;
							}
							this.local = info.address;
							if (info.id_card_a) {
								this.cardA = info.id_card_a;
							}
							if (info.id_card_b) {
								this.cardB = info.id_card_b;
							}
							this.gender = info.gender;
							this.setRadioSelect(this.gender)
							uni.hideLoading();
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		overflow: hidden;
	}

	.title {
		font-size: 15px;
		font-weight: 500;
		color: #333333;
		margin-top: 20px;
		margin-left: 40rpx;
		margin-bottom: 30rpx;
	}
	.secTitle{
		font-size: 15px;
		color: #666666;
		margin: 20px 0 12px 18px;
	}
	.form {
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.localItem {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 40rpx;

		text {
			font-size: 15px;
			color: #666666;
		}

		/deep/ .cl {
			font-size: 13px;
			color: #D5D5D5;
		}

		textarea {
			width: 670rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 1px;
			border: 1px solid #D8D8D8;
			margin-top: 10px;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 90rpx;
		line-height: 90rpx;

		text {
			font-size: 15px;
			color: #666666;
		}

		/deep/ .cl {
			font-size: 13px;
			color: #D5D5D5;
		}
	}

	.cardContainer {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 40rpx;

		.cardItem {
			// background-color: #E5E5E5;
			border-radius: 8px;
			overflow: hidden;

			image {
				display: block;
				width: 325rpx;
				height: 220rpx;
			}
		}
	}

	.save {
		width: 700rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(90deg, #9BDFB5 0%, #84DFD1 100%);
		border-radius: 40rpx;
		margin: 60px auto 0 auto;
		font-size: 18px;
		color: #FFFFFF;
	}
</style>
